let main = document.querySelector('.main');
let box = document.querySelector('#box');

pAjax({
    url:"/my/movie/v2/list/hot.json",
    data:{
        limit:12,
        offset:0,
        ct:"广州"
    }
}).then(function(res){
    res = JSON.parse(res);
    res = res.data.hot;
    shouye(res);
    let imgs = document.querySelectorAll('img');
    lazyload(imgs);
    // 滚屏函数
    main.onscroll =function(){
        lazyload(imgs);
    }
})
function shouye(res){
    res.forEach((item, index) => {
        main.innerHTML  += `
        <div class="content">
        <div class="left"><a href="./html/xiangqingye.html?id=${item.id}"><img data-src="${item.img.replace('/w.h','')}"/></a></div>
        <div class="right">
            <p><span>${item.nm}</span><span>${item.wish }</span></p>
            <p>${item.cat}</p>
            <p><span>${item.desc}</span><span>预算</span></p>
            <p>${item.showTimeInfo}</p>
        </div>
    </div>
    <hr/>`;
    });
}


// 第二条数据
pAjax({
    url:"/my/movie/v2/list/hot.json",
    data:{
        limit:12,
        offset:12,
        ct:"广州"
    }
}).then(function(res){
    res = JSON.parse(res);
    res = res.data.hot;
    shouye2(res);
    let imgs = document.querySelectorAll('img');
    lazyload(imgs);
    // 滚屏函数
    main.onscroll =function(){
        lazyload(imgs);
    }
    
})
function shouye2(res){
    res.forEach((item, index) => {
        main.innerHTML  += `
        <div class="content">
        <div class="left"><a href="./html/xiangqingye.html?id=${item.id}"><img data-src="${item.img.replace('/w.h','')}"/></a></div>
        <div class="right">
            <p><span>${item.nm}</span><span>${item.wish}</span></p>
            <p>${item.cat}</p>
            <p><span>${item.desc}</span><span>预算</span></p>
            <p>${item.showTimeInfo}</p>
        </div>
    </div>
    <hr/>`;
    });
}



// 第三条数据
pAjax({
    url:"/my/movie/v2/list/hot.json",
    data:{
        limit:12,
        offset:24,
        ct:"广州"
    }
}).then(function(res){
    res = JSON.parse(res);
    res = res.data.hot;
    shouye3(res);
    let imgs = document.querySelectorAll('img'); 
    lazyload(imgs);
    // 滚屏函数
    main.onscroll =function(){
        lazyload(imgs);
    }
})
function shouye3(res){
    res.forEach((item, index) => {
        main.innerHTML  += `
        <div class="content">
        <div class="left"><a href="./html/xiangqingye.html?id=${item.id}"><img data-src="${item.img.replace('/w.h','')}"/></a></div>
        <div class="right">
            <p><span>${item.nm}</span><span>${item.wish}</span></p>
            <p>${item.cat}</p>
            <p><span>${item.desc}</span><span>预算</span></p>
            <p>${item.showTimeInfo}</p>
        </div>
    </div>
    <hr/>`;
    });
}

// 懒加载
function lazyload(imgs){
    let h = window.innerHeight;
    let s = main.scrollTop
    for(let i=0;i<imgs.length;i++){
        if ((h+s)>imgs[i].offsetTop) {
            setTimeout(function(){
                let temp = new Image();
                temp.src = imgs[i].getAttribute('data-src');
                temp.onload = function(){
                imgs[i].src = imgs[i].getAttribute('data-src')
                }
            },1000)
        }
    }
}

